<template>
	<view>
		<uni-popup ref="popup" type="center" background-color="#fff" borderRadius="75rpx 75rpx 0 0">
			<view class="boxs">
				<view class="title flex-center">
					切换教材
				</view>
				<view class="content flex-align-center">
					<view class="left-tab">
						<view class="left-tab-item flex-align-center" :class="current === index ?'active':''"
							v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
							<span>{{item.name}}</span>
						</view>
					</view>
					<view class="right-content">
						<view class="book-name flex-center">
							<span>冀教版（2022)</span>
							<span class="book-name-sub">我的同步版本</span>
						</view>
						<view class="book-list">
							<view class="book-list-item" v-for="item in bookList" :key="item.id">
								<view class="book-bj">
									
									<span>{{item.name}}</span>
									<span class="book-num">单词量：{{item.danci}}</span>
									<span class="book-num">句子量：{{item.juzi}}</span>
								</view>
								<view class="progress-box flex-align-center">
									<u-line-progress :percentage="30" activeColor="#0315FF" :showText="false"></u-line-progress>
									<span style="margin-left: 10rpx;">30%</span>
								</view>
								

							</view>

						</view>
					</view>


				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "TextbookSelect",
		data() {
			return {
				current: 0,
				tabs: [{
						name: '我的同步课程',
					},
					{
						name: '其他同步课程',
					}
				],
				bookList: [{
					name: '七上',
					danci: '2555',
					juzi: 3220
				}]
			};
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			// 切换
			changeTab(index) {
				this.current = index;
			}

		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.boxs {
		height: 75vh;
		position: relative;
		padding: 0rpx 35rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 35rpx;
	}

	.title {
		text-align: center;
		width: px_2_vw(375);
		height: px_2_vw(88);
		font-weight: bold;
		font-size: px_2_vw(40);
		background-size: 100% 100%;
		background-image: url('@/static/images/review/qiehuandanyuan.png');
		margin: 0 auto;
		// left: 50%;
		// top: 2%;
		// left: 50%;
		// transform: translate(-50%,-50%);
		// position: absolute;
	}

	.title-sub {
		color: #0E6BFF;
		font-weight: bold;
		font-size: px_2_vw(30);
		position: absolute;
		top: 40rpx;
		left: 35rpx;

		image {
			margin-right: 10rpx;
			width: px_2_vw(30);
			height: px_2_vw(30);
		}
	}

	.content {

		flex: 1;
		margin-top: 52rpx;
		border-radius: 41rpx;

		// padding: 16rpx 36rpx;
		.left-tab {
			width: px_2_vw(300);
			height: 100%;

			.left-tab-item {
				width: 100%;
				height: px_2_vw(130);
				font-size: px_2_vw(36);

				span {
					padding-left: 20rpx;
				}

			}


		}

		.right-content {
			background: #DFE1FA;
			height: 100%;
			flex: 1;
			border-radius: 41rpx;
			padding: 20rpx;

			.book-name {
				width: px_2_vw(352);
				height: px_2_vw(58);
				background: #FED1CD;
				color: #FF0000;
				font-size: px_2_vw(30);

			}

			.book-name-sub {
				background: linear-gradient(0deg, #F7CB6B 0%, #FBA980 100%);
				border: 1rpx solid #FF0000;
				border-radius: 8rpx;
				font-size: px_2_vw(14);
				margin-left: 7rpx;
				padding: 5rpx;
			}

			.book-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 40rpx;

				.book-list-item {
					width: px_2_vw(229);
					height: px_2_vw(316);
					border: 1rpx dashed #FF6000;
					border-radius: 22rpx;
					margin-right: 20rpx;
					color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-weight: 600;
					
					.book-bj {
						width: px_2_vw(170);
						height: px_2_vw(190);
						background-image: url('@/static/images/review/qishang.png');
						background-size: 100% 100%;
						padding: 10rpx;
						display: flex;
						 
						flex-direction: column;
						.book-num {
							font-weight: 400;
							font-size: px_2_vw(18);
						}
					}
					.progress-box {
						width: px_2_vw(180);
						color:#000000;
						font-weight: bold;
						font-size: px_2_vw(22);
						 margin-top: 23rpx;
					}
				}
			}
		}
	}

	.active {
		color: #0315FF;
		background-image: url('@/static/images/review/tab-bj.png');
		background-size: 100% 100%;
	}

	.active::before {
		content: '';
		left: 0;
		top: 0;
		width: 14rpx;
		height: 100%;
		background: linear-gradient(0deg, #330D69 0%, #30C9CD 100%);
	}
</style>